<template>
  <div class="main-container">
    <!-- 左侧模块树 -->
    <div class="left-tree">
      <el-card>
        <el-tree
            :data="moduleTree"
            :props="treeProps"
            @node-click="handleNodeClick"
            highlight-current
        />

        <!-- 退出登录按钮 -->
        <el-button type="danger" @click="logout" style="width: 100%; margin-top: 10px;">
          退出登录
        </el-button>
      </el-card>
    </div>

    <!-- 右侧操作区域 -->
    <div class="right-content">
      <!-- 使用 router-view 渲染子路由 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    // 模块树数据
    const moduleTree = ref([
      {
        id: 1,
        label: '组织架构',
        children: [
          { id: 11, label: '部门管理', path: '/main/department' },
          { id: 22, label: '用户管理', path: '/main/user' }
        ]
      },
      {
        id: 2,
        label: '维修管理',
        children: [
          { id: 33, label: '维修申请', path: '/main/support' }
        ]
      }
    ])

    // 树形结构配置
    const treeProps = ref({
      children: 'children',
      label: 'label'
    })

    // 处理树节点点击
    const handleNodeClick = (data) => {
      if (data.path) {
        router.push(data.path)
      }
    }

    // 退出登录
    const logout = () => {
      // 清除本地存储的用户信息
      localStorage.removeItem('user')
      // 跳转到登录页面
      router.push('/login')
    }

    return {
      moduleTree,
      treeProps,
      handleNodeClick,
      logout,
    }
  }
}
</script>

<style scoped>
.main-container {
  display: flex;
  height: 100vh;
}

.left-tree {
  width: 240px;
  padding: 20px;
  border-right: 1px solid #ebeef5;
}

.right-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.el-card {
  margin-bottom: 0;
}

</style>